<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>
                    <h2>职位招聘列表</h2>
                </span>
                <el-select v-model="currentJobClassification" placeholder="职位分类" style="margin-top:10px;margin-bottom:10px">
                    <el-option v-for="job_classification in job_classification_list"
                        :key="job_classification.job_classification_id" :value="job_classification.job_classification"
                        :label="job_classification.job_classification"></el-option>
                </el-select><br>
                <span style="color:blue">按分类查看</span>
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="searchContext"
                    v-model="searchContext" style="margin-top:10px;margin-bottom:10px">
                </el-input>
                <el-button type="primary" class="el-icon-search" @click="search()">搜索职位</el-button>
                <el-button type="primary" class="el-icon-search" @click="searchEnterprise()">搜索企业</el-button>
            </div>
            <el-col :span="8" v-for="jobRecruitment in jobRecruitments" :key="jobRecruitment.job_recruitment_id">
                <div>
                    <el-card :body-style="{ padding: '20px' }">
                        <el-card style="background-color:rgb(197, 197, 197)" size="medium">职位名称:{{ jobRecruitment.job_title
                        }}</el-card>
                        <el-card style="width: 440px" size="medium" class="el-icon-menu">职位分类:{{
                            jobRecruitment.job_classification }}</el-card>
                        <el-card style="width: 440px" size="medium" class="el-icon-user-solid">企业名称:{{
                            jobRecruitment.enterprise_name
                        }}</el-card>
                        <el-card size="medium">薪资:{{ jobRecruitment.salary }}</el-card>
                        <el-tag size="medium" class="el-icon-view">{{ jobRecruitment.hits }}</el-tag>
                        <el-tag size="medium" class="el-icon-date">发布时间:{{ format(jobRecruitment.create_time).format
                        }}</el-tag><br>
                        <el-button type="primary" size="medium"
                            @click="detail(jobRecruitment.job_recruitment_id)">查看详情</el-button>
                    </el-card>
                </div>
            </el-col>
        </el-card>
        <div style="margin-top:10px">
            <div class="block">
                <el-pagination :current-page="currentPage" :page-size="pageSize" layout="total,  prev, pager, next,jumper"
                    :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import dateTime from '@/utils/date_time';
export default {
    data() {
        return {
            currentJobClassification: '',
            job_classification_list: [],
            jobRecruitments: [],
            searchContext: 'java工程师',
            pageSize: 6,
            pagerCount: 0,
            total: 0,
            currentPage: 1,
        }
    },
    watch: {
        // 如果 `currentJobClassification` 发生改变，这个函数就会运行
        currentJobClassification: function () {
            this.searchByJobClassification(this.currentJobClassification);
        }
    },
    methods: {
        searchByJobClassification(currentJobClassification) {
            let that = this;
            axios.get('http://127.0.0.1:5000/api/job_recruitment/get_list', {
                params: {
                    page: 1,
                    size: 6,
                    job_classification: currentJobClassification
                }
            })
                .then(function (response) {
                    console.log(response.data.result);
                    that.jobRecruitments = response.data.result.list;
                    that.total = Number.parseInt(response.data.result.count);
                    that.pagerCount = that.total % that.pageSize;
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        handleCurrentChange(val) {
            let that = this;
            if (that.currentJobClassification) {
                axios.get('http://127.0.0.1:5000/api/job_recruitment/get_list', {
                    params: {
                        page: val,
                        size: 6,
                        job_classification: that.currentJobClassification
                    }
                })
                    .then(function (response) {
                        console.log(response.data.result);
                        that.jobRecruitments = response.data.result.list;
                        that.total = Number.parseInt(response.data.result.count);
                        that.pagerCount = that.total % that.pageSize;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // 总是会执行
                    })
            } else {
                axios.get('http://127.0.0.1:5000/api/job_recruitment/get_list', {
                    params: {
                        page: val,
                        size: 6,
                    }
                })
                    .then(function (response) {
                        console.log(response.data.result);
                        that.jobRecruitments = response.data.result.list;
                        that.total = Number.parseInt(response.data.result.count);
                        that.pagerCount = that.total % that.pageSize;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // 总是会执行
                    })
            }
        },
        detail(id) {
            this.$router.push({ name: 'job_recruitment_detail', params: { job_recruitment_id: id } }, () => { }, () => { });
        },
        format(create_time) {
            return dateTime.dateTime(create_time)
        },
        searchEnterprise() {
            let that = this;
            axios.get('http://127.0.0.1:5000/api/job_recruitment/get_list', {
                params: {
                    page: 1,
                    size: 6,
                    like: 0,
                    enterprise_name: that.searchContext
                }
            })
                .then(function (response) {
                    console.log(response.data.result);
                    that.jobRecruitments = response.data.result.list;
                    that.total = Number.parseInt(response.data.result.count);
                    that.pagerCount = that.total % that.pageSize;
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        search() {
            let that = this;
            axios.get('http://127.0.0.1:5000/api/job_recruitment/get_list', {
                params: {
                    page: 1,
                    size: 6,
                    like: 0,
                    job_title: that.searchContext
                }
            })
                .then(function (response) {
                    console.log(response.data.result);
                    that.jobRecruitments = response.data.result.list;
                    that.total = Number.parseInt(response.data.result.count);
                    that.pagerCount = that.total % that.pageSize;
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
    },
    beforeMount: function () {
        let that = this;
        axios({
            method: 'get',
            url: 'http://127.0.0.1:5000/api/job_classification/get_list',
            params: {

            },
            headers: {
                'X-Auth-Token': window.localStorage.getItem("token")
            },
        })
            .then(function (response) {
                console.log(response.data);
                that.job_classification_list = response.data.result.list;
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    },
    created: function () {
        let that = this;
        axios.get('http://127.0.0.1:5000/api/job_recruitment/get_list', {
            params: {
                page: 1,
                size: 6
            }
        })
            .then(function (response) {
                console.log(response.data.result);
                that.jobRecruitments = response.data.result.list;
                that.total = Number.parseInt(response.data.result.count);
                that.pagerCount = that.total % that.pageSize;
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    },
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    margin-left: 200px;
    width: 1500px;
    height: 1200px;
}
</style>